import React from 'react'

const ForwardRefInput = React.forwardRef<HTMLInputElement>((props, ref) => {
  return <input ref={ref} {...props} />
})

export default function ForwardRefParent() {
  const inputRef = React.useRef<HTMLInputElement>(null)

  const focusInput = () => {
    inputRef.current?.focus()
  }

  return (
    <div>
      <ForwardRefInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  )
}
